<template>
  <view class="container">
    <view class="page-header">
      <view class="page-title">导航组件演示</view>
      <view class="page-desc">展示各种导航组件和交互效果</view>
    </view>

    <!-- 顶部导航栏 -->
    <view class="section">
      <view class="section-title">顶部导航栏</view>
      <view class="demo-card">
        <view class="navbar-demo">
          <view class="navbar">
            <view class="navbar-left">
              <button class="navbar-btn" @click="handleBack">
                <text class="navbar-icon">←</text>
              </button>
            </view>
            <view class="navbar-title">页面标题</view>
            <view class="navbar-right">
              <button class="navbar-btn" @click="handleMore">
                <text class="navbar-icon">⋯</text>
              </button>
            </view>
          </view>
          
          <view class="navbar navbar-fixed">
            <view class="navbar-left">
              <button class="navbar-btn">
                <text class="navbar-icon">←</text>
              </button>
            </view>
            <view class="navbar-title">固定导航栏</view>
            <view class="navbar-right">
              <button class="navbar-btn">
                <text class="navbar-icon">⋯</text>
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="section">
      <view class="section-title">标签栏</view>
      <view class="demo-card">
        <view class="tab-demo">
          <view class="tab-bar">
            <view 
              class="tab-item" 
              :class="{ active: activeTab === index }"
              v-for="(tab, index) in tabs" 
              :key="index"
              @click="setActiveTab(index)"
            >
              <text class="tab-icon">{{ tab.icon }}</text>
              <text class="tab-text">{{ tab.text }}</text>
            </view>
          </view>
          
          <view class="tab-content">
            <view class="tab-panel" v-if="activeTab === 0">
              <text>首页内容</text>
            </view>
            <view class="tab-panel" v-if="activeTab === 1">
              <text>消息内容</text>
            </view>
            <view class="tab-panel" v-if="activeTab === 2">
              <text>发现内容</text>
            </view>
            <view class="tab-panel" v-if="activeTab === 3">
              <text>我的内容</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 面包屑导航 -->
    <view class="section">
      <view class="section-title">面包屑导航</view>
      <view class="demo-card">
        <view class="breadcrumb-demo">
          <view class="breadcrumb">
            <view class="breadcrumb-item" v-for="(item, index) in breadcrumbItems" :key="index">
              <text 
                class="breadcrumb-link" 
                :class="{ active: index === breadcrumbItems.length - 1 }"
                @click="handleBreadcrumbClick(item, index)"
              >
                {{ item.text }}
              </text>
              <text class="breadcrumb-separator" v-if="index < breadcrumbItems.length - 1">/</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 步骤条 -->
    <view class="section">
      <view class="section-title">步骤条</view>
      <view class="demo-card">
        <view class="steps-demo">
          <view class="steps">
            <view 
              class="step-item" 
              :class="{ 
                active: index <= currentStep, 
                completed: index < currentStep 
              }"
              v-for="(step, index) in steps" 
              :key="index"
            >
              <view class="step-dot">
                <text class="step-number" v-if="index < currentStep">✓</text>
                <text class="step-number" v-else>{{ index + 1 }}</text>
              </view>
              <view class="step-content">
                <view class="step-title">{{ step.title }}</view>
                <view class="step-desc">{{ step.desc }}</view>
              </view>
              <view class="step-line" v-if="index < steps.length - 1"></view>
            </view>
          </view>
          
          <view class="steps-actions">
            <button class="btn btn-secondary" @click="prevStep" :disabled="currentStep === 0">
              上一步
            </button>
            <button class="btn btn-primary" @click="nextStep" :disabled="currentStep === steps.length - 1">
              下一步
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 侧边栏导航 -->
    <view class="section">
      <view class="section-title">侧边栏导航</view>
      <view class="demo-card">
        <view class="sidebar-demo">
          <view class="sidebar-toggle" @click="toggleSidebar">
            <text class="toggle-icon">☰</text>
          </view>
          
          <view class="sidebar" :class="{ active: sidebarVisible }">
            <view class="sidebar-header">
              <text class="sidebar-title">导航菜单</text>
              <button class="sidebar-close" @click="closeSidebar">
                <text class="close-icon">✕</text>
              </button>
            </view>
            <view class="sidebar-content">
              <view 
                class="sidebar-item" 
                :class="{ active: activeSidebarItem === index }"
                v-for="(item, index) in sidebarItems" 
                :key="index"
                @click="selectSidebarItem(index)"
              >
                <text class="sidebar-icon">{{ item.icon }}</text>
                <text class="sidebar-text">{{ item.text }}</text>
              </view>
            </view>
          </view>
          
          <view class="sidebar-overlay" :class="{ active: sidebarVisible }" @click="closeSidebar"></view>
        </view>
      </view>
    </view>

    <!-- 分页器 -->
    <view class="section">
      <view class="section-title">分页器</view>
      <view class="demo-card">
        <view class="pagination-demo">
          <view class="pagination">
            <button 
              class="pagination-btn" 
              :disabled="currentPage === 1"
              @click="goToPage(currentPage - 1)"
            >
              上一页
            </button>
            
            <view class="pagination-pages">
              <button 
                class="pagination-page" 
                :class="{ active: page === currentPage }"
                v-for="page in visiblePages" 
                :key="page"
                @click="goToPage(page)"
              >
                {{ page }}
              </button>
              <text class="pagination-ellipsis" v-if="showStartEllipsis">...</text>
              <text class="pagination-ellipsis" v-if="showEndEllipsis">...</text>
            </view>
            
            <button 
              class="pagination-btn" 
              :disabled="currentPage === totalPages"
              @click="goToPage(currentPage + 1)"
            >
              下一页
            </button>
          </view>
          
          <view class="pagination-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ totalItems }} 条
          </view>
        </view>
      </view>
    </view>

    <!-- 锚点导航 -->
    <view class="section">
      <view class="section-title">锚点导航</view>
      <view class="demo-card">
        <view class="anchor-demo">
          <view class="anchor-nav">
            <view 
              class="anchor-item" 
              :class="{ active: activeAnchor === anchor.id }"
              v-for="anchor in anchors" 
              :key="anchor.id"
              @click="scrollToAnchor(anchor.id)"
            >
              {{ anchor.text }}
            </view>
          </view>
          
          <view class="anchor-content">
            <view 
              class="anchor-section" 
              :id="anchor.id"
              v-for="anchor in anchors" 
              :key="anchor.id"
            >
              <view class="anchor-title">{{ anchor.text }}</view>
              <view class="anchor-text">{{ anchor.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavigationDemo',
  data() {
    return {
      activeTab: 0,
      tabs: [
        { icon: '🏠', text: '首页' },
        { icon: '💬', text: '消息' },
        { icon: '🔍', text: '发现' },
        { icon: '👤', text: '我的' }
      ],
      breadcrumbItems: [
        { text: '首页', path: '/' },
        { text: '产品', path: '/products' },
        { text: '手机', path: '/products/phone' },
        { text: 'iPhone 15', path: '/products/phone/iphone15' }
      ],
      currentStep: 1,
      steps: [
        { title: '选择产品', desc: '选择您需要的产品' },
        { title: '填写信息', desc: '填写个人信息' },
        { title: '确认订单', desc: '确认订单详情' },
        { title: '支付', desc: '完成支付' },
        { title: '完成', desc: '订单完成' }
      ],
      sidebarVisible: false,
      activeSidebarItem: 0,
      sidebarItems: [
        { icon: '🏠', text: '首页' },
        { icon: '📊', text: '数据统计' },
        { icon: '👥', text: '用户管理' },
        { icon: '⚙️', text: '系统设置' },
        { icon: '📝', text: '内容管理' },
        { icon: '🔔', text: '消息通知' }
      ],
      currentPage: 1,
      totalPages: 10,
      totalItems: 100,
      activeAnchor: 'section1',
      anchors: [
        { id: 'section1', text: '产品介绍', content: '这里是产品介绍的详细内容...' },
        { id: 'section2', text: '功能特性', content: '这里是功能特性的详细内容...' },
        { id: 'section3', text: '使用说明', content: '这里是使用说明的详细内容...' },
        { id: 'section4', text: '常见问题', content: '这里是常见问题的详细内容...' }
      ]
    }
  },
  computed: {
    visiblePages() {
      const pages = []
      const start = Math.max(1, this.currentPage - 2)
      const end = Math.min(this.totalPages, this.currentPage + 2)
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    },
    showStartEllipsis() {
      return this.currentPage > 3
    },
    showEndEllipsis() {
      return this.currentPage < this.totalPages - 2
    }
  },
  methods: {
    handleBack() {
      uni.showToast({
        title: '返回上一页',
        icon: 'none'
      })
    },
    handleMore() {
      uni.showToast({
        title: '更多操作',
        icon: 'none'
      })
    },
    setActiveTab(index) {
      this.activeTab = index
    },
    handleBreadcrumbClick(item, index) {
      if (index < this.breadcrumbItems.length - 1) {
        uni.showToast({
          title: `跳转到${item.text}`,
          icon: 'none'
        })
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    nextStep() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++
      }
    },
    toggleSidebar() {
      this.sidebarVisible = !this.sidebarVisible
    },
    closeSidebar() {
      this.sidebarVisible = false
    },
    selectSidebarItem(index) {
      this.activeSidebarItem = index
      this.closeSidebar()
      uni.showToast({
        title: `选择了${this.sidebarItems[index].text}`,
        icon: 'none'
      })
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        uni.showToast({
          title: `跳转到第${page}页`,
          icon: 'none'
        })
      }
    },
    scrollToAnchor(anchorId) {
      this.activeAnchor = anchorId
      uni.showToast({
        title: `滚动到${anchorId}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #666;
}

.demo-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 顶部导航栏 */
.navbar-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.navbar {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: white;
  border-bottom: 1rpx solid #e9ecef;
  padding: 0 20rpx;
}

.navbar-fixed {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.navbar-left, .navbar-right {
  width: 80rpx;
  display: flex;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.navbar-btn {
  width: 60rpx;
  height: 60rpx;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}

.navbar-btn:active {
  background: #f8f9fa;
}

.navbar-icon {
  font-size: 32rpx;
  color: #333;
}

/* 标签栏 */
.tab-demo {
  background: #f8f9fa;
  border-radius: 12rpx;
  overflow: hidden;
}

.tab-bar {
  display: flex;
  background: white;
  border-bottom: 1rpx solid #e9ecef;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #007aff;
}

.tab-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.tab-text {
  font-size: 22rpx;
}

.tab-content {
  padding: 30rpx;
  min-height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-panel {
  font-size: 28rpx;
  color: #333;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
}

.breadcrumb-link.active {
  color: #333;
  font-weight: 500;
}

.breadcrumb-link:not(.active):hover {
  color: #007aff;
}

.breadcrumb-separator {
  margin: 0 10rpx;
  color: #999;
  font-size: 24rpx;
}

/* 步骤条 */
.steps {
  position: relative;
  padding: 20rpx 0;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40rpx;
  position: relative;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-dot {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
  z-index: 2;
}

.step-item.active .step-dot {
  background: #007aff;
  color: white;
}

.step-item.completed .step-dot {
  background: #28a745;
  color: white;
}

.step-number {
  font-size: 24rpx;
  font-weight: bold;
}

.step-content {
  flex: 1;
  padding-top: 5rpx;
}

.step-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.step-desc {
  font-size: 24rpx;
  color: #666;
}

.step-line {
  position: absolute;
  left: 20rpx;
  top: 40rpx;
  width: 2rpx;
  height: 40rpx;
  background: #e9ecef;
  z-index: 1;
}

.steps-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

/* 侧边栏导航 */
.sidebar-demo {
  position: relative;
  height: 400rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  overflow: hidden;
}

.sidebar-toggle {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background: #007aff;
  color: white;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.toggle-icon {
  font-size: 32rpx;
}

.sidebar {
  position: absolute;
  top: 0;
  left: -300rpx;
  width: 300rpx;
  height: 100%;
  background: white;
  transition: left 0.3s ease;
  z-index: 20;
}

.sidebar.active {
  left: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #e9ecef;
}

.sidebar-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.sidebar-close {
  width: 40rpx;
  height: 40rpx;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 24rpx;
  color: #666;
}

.sidebar-content {
  padding: 20rpx 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  cursor: pointer;
  transition: background 0.3s ease;
}

.sidebar-item:hover {
  background: #f8f9fa;
}

.sidebar-item.active {
  background: #e3f2fd;
  color: #007aff;
}

.sidebar-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.sidebar-text {
  font-size: 26rpx;
  color: #333;
}

.sidebar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 15;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 分页器 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.pagination-btn {
  padding: 15rpx 30rpx;
  border: 1rpx solid #ddd;
  background: white;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #333;
  cursor: pointer;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.pagination-page {
  width: 60rpx;
  height: 60rpx;
  border: 1rpx solid #ddd;
  background: white;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #333;
  cursor: pointer;
}

.pagination-page.active {
  background: #007aff;
  color: white;
  border-color: #007aff;
}

.pagination-ellipsis {
  padding: 0 10rpx;
  color: #999;
  font-size: 24rpx;
}

.pagination-info {
  text-align: center;
  font-size: 22rpx;
  color: #666;
}

/* 锚点导航 */
.anchor-demo {
  display: flex;
  gap: 20rpx;
}

.anchor-nav {
  width: 200rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  flex-shrink: 0;
}

.anchor-item {
  padding: 15rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 10rpx;
}

.anchor-item:last-child {
  margin-bottom: 0;
}

.anchor-item.active {
  background: #007aff;
  color: white;
}

.anchor-content {
  flex: 1;
  background: white;
  border-radius: 12rpx;
  padding: 30rpx;
}

.anchor-section {
  margin-bottom: 40rpx;
}

.anchor-section:last-child {
  margin-bottom: 0;
}

.anchor-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
}

.anchor-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .anchor-demo {
    flex-direction: column;
  }
  
  .anchor-nav {
    width: 100%;
  }
  
  .steps-actions {
    flex-direction: column;
  }
}
</style>
